<template>
  <div class="container">
    <h1>E-commerce background management system</h1>
    <p>Design by The 4th Group</p>
    <div class="content">
      <div class="card" label-position="center">
        <img src="1.png" alt="Steven" class="card-image" />
        <div class="card-details">
          <h2 class="card-title">孙泽文</h2>
          <p class="card-description">商品管理模块</p>
          <button class="card-button" onclick="window.open('https://gitee.com/sun-zewen', '_blank');">主页</button>
        </div>
      </div>
      <div class="card" label-position="center">
        <img src="2.png" alt="Image 2" class="card-image" />
        <div class="card-details">
          <h2 class="card-title">周悦</h2>
          <p class="card-description">内容管理模块</p>
          <button class="card-button" onclick="window.open('https://gitee.com/zy0208zy', '_blank');">主页</button>
        </div>
      </div>
      <div class="card" label-position="center">
        <img src="3.png" alt="Image 3" class="card-image" />
        <div class="card-details">
          <h2 class="card-title">尹程琦</h2>
          <p class="card-description">营销管理模块</p>
          <button class="card-button" onclick="window.open('https://gitee.com/yin784530895', '_blank');">主页</button>
        </div>
      </div>
      <div class="card">
        <img src="4.png" alt="Image 4" class="card-image" />
        <div class="card-details">
          <h2 class="card-title">王嘉豪</h2>
          <p class="card-description">用户管理模块</p>
          <button class="card-button" onclick="window.open('https://gitee.com/dejavu12138', '_blank');">主页</button>
        </div>
      </div>
    </div>
  </div>
</template>

<style>
.container {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

h1 {
  font-size: 32px;
  margin-top: 40px;
  text-align: center;
  color: black;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  animation: rainbow 5s infinite;
}

h2{
  color: #333; /* 字体颜色 */
  font-size: 24px; /* 字体大小 */
  font-weight: bold; /* 字体粗细 */
  text-align: center; /* 文本对齐 */
  text-transform: uppercase; /* 文本转换为大写 */
  /* 添加其他样式属性根据需要 */
}
p {
  font-size: 20px;
  margin-bottom: 40px;
  text-align: center;
  color: black;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  animation: rainbow 5s infinite;
}
.content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  justify-content: center;
}

.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #f5f7fa;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card-image {
  width: 270px;
  height: 250px;
  border-radius: 8px;
  object-fit: cover;
  margin-bottom: 10px;
}

.card-title {
  font-size: 24px;
  margin-bottom: 10px;
}

.card-description {
  font-size: 14px;
  margin-bottom: 20px;
}

.card-button {
  background-color: #4c51bf;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}

.card-button:hover {
  background-color: #434190;
}
</style>
